<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      background: #f0f0f0;
    }

    .container {
      display: flex;
      height: 300px;
      width: 100%;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background: white;
    }

    .circle {
      flex: 0 0 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .circle-shape {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #FFF9C4;
      /* 初始浅黄色 */
      transition: background-color 0.3s ease;
    }

    .scroll-area {
      flex: 1;
      overflow-y: scroll;
      padding: 20px;
    }

    .scroll-content {
      height: 800px;
      /* 需要足够高才能滚动 */
    }
  </style>
</head>

<body>

  <select id="langSelector" style="position: absolute; top: 10px; right: 10px;">
    <option value="zh-CN">中文</option>
    <option value="en">English</option>
  </select>

  <div class="container">
    <div class="circle">
      <div class="circle-shape" id="circle"></div>
    </div>
    <div class="scroll-area" id="scrollArea" >
      <div class="scroll-content" >
        <p id="text-scroll" style="margin-top:50px;padding-top: 130px;"></p>
        <p id="text-shallow"></p>
        <p id="status">当前状态：</p>
        <p id="text-deep"></p>
        <p id="text-submit"></p>
      </div>
    </div>
  </div>

  <script>
    const circle = document.getElementById('circle');
    const scrollArea = document.getElementById('scrollArea');

    const colors = [
      '#FFF9C4', // 浅黄色
      '#FFF176', // 正黄色
      '#FFD54F', // 深黄色
      '#FFC107'  // 更深的黄色
    ];

    const dict = {
      'zh-CN': {
        0: "一泻千里",
        1: "正常",
        2: "有点困难",
        3: "拉不出来"
      },
      'en': {
        0: "diarrhea",
        1: "normal",
        2: "hard",
        3: "blocked"
      }
    };

    let currentLang = 'zh-CN';

    const langText = {
      'zh-CN': {
        scroll: "往下滚动，一共4种颜色",
        shallow: "最浅的表示一泻千里（拉稀）",
        deep: "最深的表示拉不出屎",
        submit: "点击圆形提交今日拉屎数据",
        statusLabel: "当前状态",
        pageTitle: "关注个人拉屎健康",
        alertSuccess: "今天拉屎了耶"
      },
      'en': {
        scroll: "Scroll down: 4 levels of color",
        shallow: "Lightest color means diarrhea",
        deep: "Darkest color means blocked",
        submit: "Click the circle to submit today's data",
        statusLabel: "Status",
        pageTitle: "shit",
        alertSuccess: "Day Day Shit!"
      }
    };

    let index = 1;
    circle.style.backgroundColor = colors[index];

    function updateStatus(i) {
      document.getElementById('status').innerText = langText[currentLang].statusLabel + ": " + dict[currentLang][i];
      updateStaticText();
    }

    function updateStaticText() {
      document.getElementById('text-scroll').innerText = langText[currentLang].scroll;
      document.getElementById('text-shallow').innerText = langText[currentLang].shallow;
      document.getElementById('text-deep').innerText = langText[currentLang].deep;
      document.getElementById('text-submit').innerText = langText[currentLang].submit;
    }

    window.onload = function() {
      const maxScroll = scrollArea.scrollHeight - scrollArea.clientHeight;
      scrollArea.scrollTop = (index / (colors.length - 1)) * maxScroll;
      updateStatus(index);
      updateStaticText();
      document.title = langText[currentLang].pageTitle;
    };

    // 监听滚动事件
    scrollArea.addEventListener('scroll', () => {
      const scrollTop = scrollArea.scrollTop;
      const maxScroll = scrollArea.scrollHeight - scrollArea.clientHeight;
      const percent = scrollTop / maxScroll;

      // 计算当前颜色阶段
      index = Math.floor(percent * colors.length);
      if (index >= colors.length) index = colors.length - 1;

      circle.style.backgroundColor = colors[index];
      updateStatus(index);
    });

    document.getElementById('langSelector').addEventListener('change', function () {
      currentLang = this.value;
      updateStatus(index);
      updateStaticText();
      document.title = langText[currentLang].pageTitle;
    });

    circle.addEventListener('click', function (event) {
      console.log(index + "圆形被点击了");
      updateStatus(index);
      sendSmoothness(index);
    });

    // 发送 POST 请求函数
    function sendSmoothness(level) {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "http://localhost:8080/shit", true);
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      xhr.onreadystatechange = function () {
        console.log("响应内容: ", xhr.responseText);
        if (xhr.readyState === 4 && xhr.status === 200) {
          alert(langText[currentLang].alertSuccess);
        }
      };
      xhr.send(JSON.stringify({ smoothness: dict['en'][level] }));
    }
  </script>

</body>

</html>